<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:head="http://www.w3.org/1999/html">
<head th:include="public/public_css::public_css ('货品清单')" />


<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}" media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" media="all"/>
<body style="background-color: #f2f2f2;">



<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs24">
                <form class="layui-form layui-card-header  layui-card-header-auto" id="form">
                    <!--<input type="hidden" th:value="${id}" id="id" name="id">-->
                    <div class="layui-inline" style="width: 190px">
                        <label class="layui-form-label">货品</label>
                        <div class="layui-inline">
                            <select lay-ignore="lay-ignore"    id="hpbh" onchange="getName()"  select2   style="width: 193px" ></select>
                            <!-- <input type="text" name="mc" placeholder="请选择货品编号"  class="layui-input" style="width: 190px">-->
                        </div>
                    </div>
                    <div class="layui-inline" style="width: 190px">
                        <label class="layui-form-label">数量</label>
                        <div class="layui-inline">
                            <input type="number" name="sl" id="sl" min="1" placeholder="请输入货品数量"  class="layui-input" style="width: 190px">
                        </div>
                    </div>
                    <div class="layui-inline" style="width: 190px">
                        <label class="layui-form-label">清单保存</label>
                        <div class="layui-inline">
                            <a class="layui-btn layui-btn-sm layui-btn-normal save" style="    margin-top: 35px; margin-left: -50px;">
                                <i class="layui-icon">&#x1005;</i> 保存
                            </a>
                        </div>
                    </div>
                    <input type="hidden" name="mc" id="mc">
                    <input type="hidden" name="bh" id="bh">
                    <input type="hidden" name="hpid" id="hpid">
                </form>



                <input type="hidden" th:value="${id}" id="id" name="id">
                <!--列表-->
                <section class="panel panel-padding layui-card-body" >
                    <div class="pro">
                        <table id="table"  class="table text-nowrap" style="word-break:break-all; word-wrap:break-word;"></table>
                    </div>
                </section>

                <div class="group-button" style="float:right;margin-bottom: 10px">
                    <a class="layui-btn layui-btn-sm layui-btn-normal saves">
                        <i class="layui-icon">&#x1005;</i> 保存
                    </a>
                    <a class="layui-btn layui-btn-sm layui-btn-normal closes">
                        <i class="layui-icon">&#x1005;</i> 取消
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" th:src="@{/plugin/layui/js/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/plugin/layui/js/version.js}"></script>
<script th:src="@{/plugin/layui/js/common.js}"></script>
<div th:include="public/public_js::public_js"></div>

<script>
    //	回车查询
    document.onkeydown = function(event) {
        e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13) {
            //执行的方法
            $('#search_button').click();
        }
    };
    layui.use(['list','layer','zzpUtils','jquery','laydate'],function () {
        window.operateEvent = {
            //删除
            "click .delete": function (e, value, row, index) {//删除清单
                var tabledata = $table.bootstrapTable('getData');
                console.info("删除行");
                var id = [];
                id.push(row.id);
                $table.bootstrapTable('remove', {field: 'id', values: id});
                $table.bootstrapTable('load', tabledata);
            },
        }
        var zzpUtils = layui.zzpUtils,
            $ = layui.jquery,
            layer = layui.layer,
            laydate = layui.laydate;

        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination: false,
            url: '/wmsgoodsbom/getWmsGoodsBom/'+$("#id").val(),
            columns: [/*{
                field: '',
                checkbox: true
            },*/ {
                field: 'mc',
                title: '货品名称',
                align : 'center'
            }, {
                field: 'bh',
                title: '货品编号',
                align : 'center'
            }, {
                field: 'sl',
                title: '数量',
                align : 'center'
            }, {
                field: 'caozuo',
                title: '可用操作',
                align : 'center',
                events: operateEvent,
                formatter: operateFormatter
            }],
            /*     queryParams: function () {//查询条件
             return zzpUtils.getFormJson($("#searchForm"));
             },*/
            detailFormatter: function (row, index) {
                return "这里就没有确定过11";
            },
            /*onDblClickRow: function (row, index) {//双击展示

             }*/

        });

        function operateFormatter(value, row, index) {
            return [
                '<a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm  delete" >删除</a>'

            ].join('')
        }


        function getUUID() {
            return 'xxxx-xxxx-xxxx-xxxx-xxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        //保存清单到表格
        $(".save").on('click', function () {
            var reg=/^[1-9]{1,}[\d]*$/;
            if ($("#hpbh").val() == "" || $("#hpbh").val() == null || $("#sl").val() == "" || $("#sl").val() == null) {
                layer.msg("请完整表单信息")
            }else if(!$("#sl").val().match(reg)){
                layer.msg("请输入正整数！");
            } else {
                var rows = $table.bootstrapTable('getData');
                var hpid = $("#hpid").val();
                var flag=true;
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i].hpid == hpid) {
                        indexs = i;
                        flag = false;
                    }
                }
                if (flag == true) {
                    var formObject = {};
                    var formArray = $("#form").serializeArray();
                    $.each(formArray, function (i, item) {
                        formObject[item.name] = item.value;
                    });
                    formObject.id = getUUID();
                    $table.bootstrapTable('append', formObject);
                } else {
                    layer.msg("货品已存在");
                }
            }
        });
        //   清单保存到数据库
        $(".saves").on('click',function () {
            var obj={};
            obj.hpid=$("#id").val();
            obj.wmsGoodsBom=$table.bootstrapTable('getData');
            console.info("obj");
            console.info(obj);
            zzpUtils.confirm("是否确定保存",function(index){
                zzpUtils.action({
                    url:"/wmsgoodsbom/add",
                    data:JSON.stringify(obj),
                    success:function (data) {
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            top.layer.msg(data.title+'<br>'+data.message);
                        },500);
                    },error: function (xhr, textStatus) {
                        console.log(textStatus);
                        console.log(xhr)
                    }
                })
            });
            return false;
        });

        $(".closes").on('click',function () {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        })


        $('#hpbh').select2({
            ajax: {
                url: "/zxsswms/wmsgoods/getGoodsBySshzid",
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        bh: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    console.info(data);
                    var arr = new Array();
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            arr.push({id: data.rows[i].id+","+ data.rows[i].mc, text: data.rows[i].bh});
                        }
                    }
                    console.info("arr");
                    console.info(arr);
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请选择货品编号',
            allowClear: true

        });


        window.getName=function(){
            $("#bh").val($("#hpbh").select2("data")[0].text);
            var strs= $('#hpbh').val().split(",");
            console.info(strs);
            /*     $("#id").val(strs[0]);*/
            $("#mc").val(strs[1]);
            var id=strs[0];
            $("#hpid").val(id);
        }
    })

</script>
</html>